<template>
  <div class="app-container">
    <el-dialog title="信息详情" :visible.sync="previewVisible" width="1200px" top="10px" :close-on-click-modal="false" :close-on-press-escape="false">
      <table width="100%" border="0" cellpadding="15" cellspacing="1" class="inputtable">
        <tr>
          <td width="120" align="center" valign="top" bgcolor="#F9FBFB"><strong>信息类别</strong></td>
          <td valign="top" bgcolor="#FFFFFF">
            {{ infoClassName(detail.classId) }}
          </td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>姓名</strong></td>
          <td valign="top" bgcolor="#FFFFFF">{{ detail.realname }}</td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>身份证号</strong></td>
          <td valign="top" bgcolor="#FFFFFF">{{ detail.idcard }}</td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>内容</strong></td>
          <td valign="top" bgcolor="#FFFFFF" style="word-wrap:break-word; word-spacing:normal;">
            <div id="pre_content" style="word-wrap:break-word; word-spacing:normal;">
              <div>{{ detail.alltext }}</div>
              <div>字数：{{ detail.textnum }}</div></div>
          </td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>加黑提前</strong></td>
          <td valign="top" bgcolor="#FFFFFF">{{ showTextB(detail.textb) }}</td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>刊登期数</strong></td>
          <td valign="top" bgcolor="#FFFFFF" style="word-wrap:break-word; word-spacing:normal;">
            <div id="pre_vol" style="word-wrap:break-word; word-spacing:normal;">{{ detail.vols }}</div>
            <div>共 {{ detail.volnum }} 期
              <span v-if="!detail.week1||!detail.week3||!detail.week5"> 只登 <span v-if="detail.week1">周一</span> <span v-if="detail.week3">周三</span> <span v-if="detail.week5">周五</span> </span>
            </div>
          </td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>微信小程序</strong></td>
          <td valign="top" bgcolor="#FFFFFF" style="word-wrap:break-word; word-spacing:normal;">
            <!-- <div v-if="detail.weixin">同步刊登至微信小程序 <span v-if="detail.wxTopDays">置顶 {{ detail.wxTopDays }} 天</span></div> -->
            <div>
              刊登 {{ detail.wxNum }} 天
              <span v-if="detail.wxWeeksText">（只登{{ detail.wxWeeksText }}）</span>
              <div v-if="detail.wxList">{{ detail.wxList.join('、') }}</div>
            </div>
            <div>
              置顶 {{ detail.wxTopDays }} 天
            </div>
          </td>
        </tr>
        <tr v-if="detail.wxUser">
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>小程序用户</strong></td>
          <td style="vertical-align: top" bgcolor="#FFFFFF">
            <el-image
              style="width: 50px; height: 50px;margin-right:10px;"
              :src="detail.wxUser.avatarUrl"
              fit="fill"
              :preview-src-list="[detail.wxUser.avatarUrl]"
            />
            <div>{{ detail.wxUser.nickname }}</div>
          </td>
        </tr>
        <tr v-if="detail.wxUser&&detail.status">
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>商户订单号</strong></td>
          <td bgcolor="#FFFFFF">{{ detail.outTradeNo }}</td>
        </tr>
        <tr v-if="detail.wxUser&&detail.status">
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>微信支付单号</strong></td>
          <td bgcolor="#FFFFFF">{{ detail.transactionId }}</td>
        </tr>
        <tr v-if="detail.files&&detail.files.length>0">
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>图片</strong></td>
          <td valign="top" bgcolor="#FFFFFF">
            <div
              v-for="it in detail.files"
              :key="it.id"
              style="float:left"
            >
              <el-image
                style="width: 100px; height: 100px;margin-right:10px;"
                :src="$http.defaults.baseURL + 'api/mpfile/download?id=' + it.id"
                fit="fill"
                :preview-src-list="detail.files.map(file => $http.defaults.baseURL + 'api/mpfile/download?id=' + file.id)"
              />
            </div>
          </td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>备注</strong></td>
          <td valign="top" bgcolor="#FFFFFF">{{ detail.remark }}</td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>提示信息</strong></td>
          <td valign="top" bgcolor="#FFFFFF"><span id="pre_message" />&nbsp;<span v-if="detail.textnum>limitTextNum && detail.vols>0">超{{ detail.textnum - limitTextNum }}字</span><span v-if="detail.status===8">&nbsp;删除原因：{{ detail.delermarks }}</span>&nbsp;共{{ detail.price }}元<span v-if="detail.memberCard">（使用会员卡）</span></td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>编号</strong></td>
          <td valign="top" bgcolor="#FFFFFF">{{ detail.id }}</td>
        </tr>
        <tr v-if="detail.status!==0">
          <td align="center" valign="top" bgcolor="#F9FBFB" />
          <td valign="top" bgcolor="#FFFFFF">
            <el-button type="success" @click="addInfo(detail.id,1)">引用信息</el-button>
            <el-button type="primary" @click="printInfo(detail.id)">打印</el-button>
            <el-button v-if="detail.status!==8" type="warning" @click="addInfo(detail.id,2)">改单</el-button>
            <template v-if="detail.status!==8">
              <el-popconfirm v-if="detail.status===1&&detail.publishUserId" style="margin-left:10px" title="确定删除该信息吗？" @onConfirm="deleteInfo(detail.id)" @confirm="deleteInfo(detail.id)">
                <el-button slot="reference" type="danger" :loading="loading">删除</el-button>
              </el-popconfirm>
              <el-button v-else type="danger" @click="removeInfo(detail.id)">撤单</el-button>
            </template>
          </td>
        </tr>
        <tr v-else>
          <td align="center" valign="top" bgcolor="#F9FBFB" />
          <td valign="top" bgcolor="#FFFFFF">
            <el-popconfirm title="确定删除该信息吗？" @onConfirm="deleteInfo(detail.id)" @confirm="deleteInfo(detail.id)">
              <el-button slot="reference" type="danger" :loading="loading">删除</el-button>
            </el-popconfirm>
            <el-button type="warning" style="margin-left:10px" @click="addInfo(detail.id,2)">修改</el-button>
          </td>
        </tr>
      </table>
    </el-dialog>
    <el-dialog title="撤单原因" :visible.sync="removeVisible" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-input v-model="delermarks" placeholder="请输入撤单原因" style="width: 600px;" class="filter-item" />
      <el-button class="filter-item" type="primary" style="margin-left: 10px;" :loading="loading" @click="removeSubmit">
        确定撤单
      </el-button>
    </el-dialog>

    <div class="filter-container">
      <div style="float:left;">
        <el-input v-model="listQuery.realname" placeholder="姓名" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-input ref="phoneInput" v-model="listQuery.phone" placeholder="电话" style="width: 150px;margin-left: 10px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-select v-model="listQuery.status" placeholder="请选择状态" clearable style="margin-left: 10px;width: 120px" class="filter-item" @keyup.enter.native="handleFilter">
          <el-option label="全部" :value="null" />
          <el-option v-for="(it,index) in statusList" :key="index" :label="it.label" :value="it.value" />
        </el-select>
        <el-input v-model="listQuery.id" placeholder="编号" style="width: 100px;margin-left: 10px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-input v-model="listQuery.key" placeholder="关键词" style="width: 150px;margin-left: 10px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-input v-model="listQuery.idcard" placeholder="身份证号" style="width: 200px;margin-left: 10px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-select v-model="listQuery.infoClass" placeholder="请选择" style="margin-bottom:10px;margin-left: 10px;vertical-align:middle" @keyup.enter.native="handleFilter">
          <el-option
            label="全部"
            :value="null"
          />
          <el-option-group
            v-for="group in infoClassList"
            :key="group.id"
            :label="group.classname"
          >
            <el-option
              v-for="item2 in group.children"
              :key="item2.id"
              :label="item2.classname"
              :value="item2.id"
            />
          </el-option-group>
        </el-select>
        <el-select v-model="listQuery.source" placeholder="请选择来源" clearable style="margin-left: 10px;width: 120px" class="filter-item" @keyup.enter.native="handleFilter">
          <el-option label="全部" :value="null" />
          <el-option label="前台" :value="1" />
          <el-option label="微信小程序" :value="2" />
        </el-select>
        <el-select v-model="listQuery.textb" placeholder="加黑提前" clearable style="margin-left: 10px;width: 120px" class="filter-item" @keyup.enter.native="handleFilter">
          <el-option label="全部" :value="null" />
          <el-option label="普通" :value="0" />
          <el-option label="加黑" :value="1" />
          <el-option label="提前/标下" :value="2" />
          <el-option label="加黑+提前/标头" :value="3" />
        </el-select>
        <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="handleFilter" @keyup.enter.native="handleFilter">
          搜索
        </el-button>
      </div>
    </div>
    <template>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        @sort-change="sortChange"
      >
        <!-- <el-table-column v-if="roleEdit" type="selection" width="50" align="center" /> -->
        <el-table-column align="center" prop="id" label="信息编号" width="120px" />
        <el-table-column align="center" prop="realname" label="姓名" width="120px" />
        <el-table-column align="center" prop="publishUserId" label="录入员" width="120px">
          <template slot-scope="scope">
            {{ scope.row.publishUserId? scope.row.publishUserId:'个人' }}
          </template>
        </el-table-column>
        <el-table-column width="250px" prop="classId" label="信息分类">
          <template slot-scope="scope">
            {{ infoClassName(scope.row.classId) }}
          </template>
        </el-table-column>

        <el-table-column width="200px" prop="adddate" align="center" label="录入时间" />
        <el-table-column width="150px" prop="status" align="center" label="状态">
          <template slot-scope="scope">
            {{ statusList.find(item=>item.value==scope.row.status)?statusList.find(item=>item.value===scope.row.status).label:scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="300">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-search" @click="detailShow(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </template>
  </div>
</template>

<script>
// import { fetchList } from '@/api/article'
import Pagination from '@/components/Pagination'

export default {
  name: 'ArticleList',
  components: { Pagination },
  data() {
    return {
      removeId: 0,
      removeVisible: false,
      delermarks: '',
      limitTextNum: 65,
      loading: false,
      detail: {
        id: null,
        classId: null,
        realname: '',
        idcard: '',
        alltext: '',
        textNum: 0,
        textb: 0,
        vols: '',
        volnum: 0,
        remark: ''
      },
      previewVisible: false,
      statusList: [{ value: 0, label: '待支付' }, { value: 1, label: '未校对' }, { value: 3, label: '已校对' }, { value: 4, label: '已拒绝' }, { value: 8, label: '已删除' }],
      infoClassList: [],
      unitName: '',
      roleName: '',
      cfajbh: '',
      showStep: [],
      showAddBtn: false,
      roleEdit: true,
      selection: false,
      dicListLoading: false,
      stopDicLoading: false,
      startDicLoading: false,
      submitLoading: false,
      classList: [],
      classForm: {
        parentClass: 14,
        label: ''
      },
      diclist: [],
      settingVisible: false,
      item: {},
      dialogtitle: '',
      dialogVisible: false,
      allDialogVisible: false,
      readOnly: false,
      timestamp: '',
      list: [
      ],
      list2: [],
      list3: [],
      total: 0,
      listLoading: true,
      listQuery: {
        realname: '',
        phone: '',
        status: null,
        id: null,
        key: '',
        idcard: '',
        infoClass: null,
        source: null,
        textb: null,
        page: 1,
        limit: 20
      },
      Sortkey: '',
      Isace: '',
      multipleSelection: [],
      id: '',
      step: '',
      showThansferBtn: false,
      knowledgeVisible: false
    }
  },
  watch: {
    isEdit: {
      handler(val) {
        console.log('isEdit:' + val)
        this.roleEdit = val
      },
      immediate: true
    },
    isSelection: {
      handler(val) {
        console.log('isSelection:' + val)
        this.selection = val
      },
      immediate: true
    }
  },
  mounted() {
    this.getInfoClass()
    this.$refs.phoneInput.focus()
  },
  created() {
    this.getList()
  },
  methods: {
    printInfo(id) {
      // window.open(this.$http.defaults.baseURL + '/api/busInfo/getPrintHtml?id=' + id)
      window.open('/api/busInfo/getPrintHtml?id=' + id)
    },
    removeSubmit() {
      if (this.delermarks) {
        const para = { id: this.removeId, delermarks: this.delermarks }
        this.loading = true
        this.$http
          .post('/api/busInfo/cancel', para)
          .then(response => {
            this.loading = false
            if (response.data.success === true) {
              this.$message({
                message: '撤单成功',
                type: 'success'
              })
              this.removeVisible = false
              this.previewVisible = false
              this.getList()
            } else {
              console.log('获取失败:' + response.data.message)
              this.$message({
                message: '获取失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            console.log(error)
            this.loading = false
          })
      } else {
        this.$message({
          message: '请输入撤单原因',
          type: 'error'
        })
      }
    },
    deleteInfo(id) {
      const para = { ids: [id] }
      this.loading = true
      this.$http
        .post('/api/busInfo/remove', para)
        .then(response => {
          this.loading = false
          if (response.data.success === true) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.removeVisible = false
            this.previewVisible = false
            this.getList()
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.loading = false
        })
    },
    removeInfo(id) {
      this.removeVisible = true
      this.removeId = id
      this.delermarks = ''
    },
    addInfo(id, type) {
      this.$router.push({ name: 'addinfo', query: { id: id, type: type }})
    },
    detailShow(id) {
      this.$http
        .get('/api/busInfo/getById?id=' + id)
        .then(response => {
          if (response.data.success === true) {
            this.detail = response.data.result
            const wxWeeksArr = []
            if (this.detail.wxWeek1) {
              wxWeeksArr.push('周一')
            }
            if (this.detail.wxWeek2) {
              wxWeeksArr.push('周二')
            }
            if (this.detail.wxWeek3) {
              wxWeeksArr.push('周三')
            }
            if (this.detail.wxWeek4) {
              wxWeeksArr.push('周四')
            }
            if (this.detail.wxWeek5) {
              wxWeeksArr.push('周五')
            }
            if (this.detail.wxWeek6) {
              wxWeeksArr.push('周六')
            }
            if (this.detail.wxWeek7) {
              wxWeeksArr.push('周日')
            }
            this.detail.wxWeeksText = wxWeeksArr.length !== 7 ? wxWeeksArr.join('、') : ''
            // 处理微信刊登信息
            if (this.detail.passTime2List && this.detail.passTime2List.length > 0) {
              if (this.detail.wxNum > 0) {
                const wxResult = []
                this.detail.passTime2List.forEach(item => {
                  let dateResult = item.passTime2.split(' ')[0]
                  const date = new Date(dateResult).getDay()
                  if (date === 0) {
                    dateResult += '（周日）'
                  } else if (date === 1) {
                    dateResult += '（周一）'
                  } else if (date === 2) {
                    dateResult += '（周二）'
                  } else if (date === 3) {
                    dateResult += '（周三）'
                  } else if (date === 4) {
                    dateResult += '（周四）'
                  } else if (date === 5) {
                    dateResult += '（周五）'
                  } else if (date === 6) {
                    dateResult += '（周六）'
                  }
                  wxResult.push(dateResult)
                })
                this.detail.wxList = wxResult
              }
            }
            let alltext = this.detail.title + ':' + this.detail.content
            if (this.detail.phone) {
              alltext = alltext + '。电话：' + this.detail.phone
            }
            if (this.detail.phone2) {
              alltext = alltext + ' ' + this.detail.phone2
            }
            this.detail.alltext = alltext
            this.detail.vols = this.detail.volList.map(item => {
              const year = new Date(item.pubdate).getFullYear()
              const nowYear = new Date().getFullYear()
              if (year !== nowYear) {
                return (year - 2000) * 1000 + parseInt(item.name)
              } else {
                return item.name
              }
            }).join(',')
            this.previewVisible = true
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    showTextB(val) {
      if (this.detail.classId === 70) {
        switch (val) {
          case 2:
            return '标下'
          case 3:
            return '标头'
        }
      } else {
        switch (val) {
          case 0:
            return '普通'
          case 1:
            return '加黑'
          case 2:
            return '提前'
          case 3:
            return '加黑+提前'
        }
      }
    },
    infoClassName(id) {
      let classname = ''
      this.infoClassList.forEach(item => {
        item.children.forEach(it => {
          if (it.id === id) {
            classname = item.classname + ' > ' + it.classname
          }
        })
      })
      return classname
    },
    getInfoClass() {
      this.$http
        .get('/api/busInfoClass/getLevelList')
        .then(response => {
          if (response.data.success === true) {
            this.infoClassList = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    sortChange(column, prop, order) {
      this.Sortkey = column.prop
      if (column.order === 'ascending') {
        this.Isace = 'asc'
      } else {
        this.Isace = 'desc'
      }
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    getList() {
      const para = {
        realname: this.listQuery.realname,
        phone: this.listQuery.phone,
        status: this.listQuery.status,
        id: this.listQuery.id,
        key: this.listQuery.key,
        idcard: this.listQuery.idcard,
        classId: this.listQuery.infoClass,
        source: this.listQuery.source,
        textb: this.listQuery.textb,
        orderField: this.Sortkey,
        orderType: this.Isace,
        pageNum: this.listQuery.page,
        pageSize: this.listQuery.limit
        // publishTime: this.listQuery.publishTime,
        // title: this.listQuery.title
      }
      this.listLoading = true
      this.$http
        .post('/api/busInfo/queryByPage', para)
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            this.list = response.data.result.records
            this.total = response.data.result.total
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.listLoading = false
        })
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //   this.listLoading = false
      // })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
<style>
.inputtable{
  background:#ccc;
  line-height: 150%;
}
</style>
